<template>
  <el-timeline>
    <el-timeline-item
      v-for="(item, index) in logList"
      :key="index"
      placement="top"
      :color="item.color"
      :timestamp="item.CreateTime + ' '+item.NodeName + getTagText(item)"
    >
      <div v-if="item.NodeType == 3">{{ item.title }}</div>
      <div v-else-if="item.Children == null || item.Children.lenghth === 0">
        <el-row :gutter="24">
          <el-col :span="8" :class="item.Id == curId ? 'chiose' : ''">
            <el-link v-if="item.Status == 2 || item.Status == 3 || item.Status == 7" title="查看表单" class="icon" icon="el-icon-view" @click="showForm(item)" />
            <span v-if="item.NodeType == 0">{{ item.title }}</span>
            <el-link v-else @click="showEmp(item)">{{ item.Emp.EmpName + '('+item.Emp.UnitDept+')' }}</el-link>
          </el-col>
          <el-col :span="4">
            <span
              :style="{
                color: AuditItemStatus[item.Status].color,
              }"
            >{{ AuditItemStatus[item.Status].text }}</span>
          </el-col>
          <el-col :span="4">
            <span v-if="item.EndTime"> {{ moment(item.EndTime).format('YYYY-MM-DD HH:mm') }}</span>
          </el-col>
          <el-col v-if="item.NodeType !== 0" :span="8">
            意见：{{ item.AuditOpinion }}
          </el-col>
        </el-row>
        <el-row v-if="item.SignFile || (item.Files && item.Files.length > 0)" style="margin-top: 10px;" :gutter="24">
          <el-col v-if="item.SignFile" :span="6">
            <span class="label">签名：</span>
            <el-image style="height: 120px;" :src="item.SignFile.FileUri" :preview-src-list="[item.SignFile.FileUri]" />
          </el-col>
          <el-col v-if="item.Files && item.Files.length > 0" :span="18">
            <span class="label">附件：</span>
            <fileListView :file-list="item.Files" />
          </el-col>
        </el-row>
      </div>
      <el-card v-else>
        <div slot="header">
          <el-tag
            :style="{
              color: AuditItemStatus[item.Status].color,
            }"
            effect="plain"
          >{{ AuditItemStatus[item.Status].text }}</el-tag>
          <span style="margin-left: 10px;">{{ item.title }}</span>
        </div>
        <AuditLogItem :logs="item.Children" :link-pk="linkPk" :cur-id="curId" :link-type="linkType" />
      </el-card>
    </el-timeline-item>
    <empModel
      :id="empId"
      :visible="empVisible"
      @close="empVisible=false"
    />
    <auditFormView :form-id="formId" :link-pk="linkPk" :link-type="linkType" :title="title" :visible.sync="visible" />
  </el-timeline>
</template>

<script>
import moment from 'moment'
import { AuditItemStatus, AuditMarkState } from '@/flow/config/flowConfig'
import empModel from '@/components/emp/empModel.vue'
import auditFormView from '@/customForm/components/auditForm/auditFormView.vue'
import fileListView from '@/components/file/fileListView.vue'
export default {
  name: 'AuditLogItem',
  components: {
    empModel,
    auditFormView,
    fileListView
  },
  props: {
    logs: {
      type: Array,
      default: null
    },
    linkPk: {
      type: String,
      default: null
    },
    linkType: {
      type: String,
      default: null
    },
    curId: {
      type: String,
      default: null
    }
  },
  data() {
    return {
      AuditItemStatus,
      AuditMarkState,
      logList: [],
      title: null,
      empId: null,
      empVisible: false,
      visible: false,
      formId: null
    }
  },
  computed: {
  },
  watch: {
    logs: {
      handler(val) {
        if (val) {
          this.reset()
        }
      },
      immediate: true
    }
  },
  mounted() {},
  methods: {
    moment,
    getTagText(item) {
      if (item.MarkState === 0 || item.MarkState === 3 || item.MarkState === 4 || item.MarkState === 7) {
        return ''
      }
      return '(' + AuditMarkState[item.MarkState].text + ')'
    },
    showForm(item) {
      this.title = item.NodeName + '表单信息'
      this.formId = item.FormId
      this.visible = true
    },
    showEmp(item) {
      this.empId = item.Emp.EmpId
      this.empVisible = true
    },
    async reset() {
      this.logList = this.logs.map(c => {
        if (c.Status == null) {
          c.color = '#909399'
        } else {
          c.color = AuditItemStatus[c.Status].color
        }
        if (c.SignFile) {
          c.SignFile.FileUri = c.SignFile.FileUri + '?accreditId=' + this.$store.getters.token
        }
        c.CreateTime = moment(c.CreateTime).format('MM-DD HH:mm')
        if (c.NodeType === 0) {
          c.title = c.Emp.EmpName + '(' + c.Emp.UnitDept + ')【开始审批】'
        } else if (c.NodeType === 3) {
          c.title = c.Emp.EmpName + '(' + c.Emp.UnitDept + ')【结束审批】'
        } else if (c.NodeType === 4) {
          c.title = c.NodeName + '【子流程审批开始】'
        } else if (c.NodeType === 2) {
          c.title = c.NodeName + '【循环审批 - ' + c.Show + '】'
        } else {
          if (c.AuditType === 1) {
            c.title = c.NodeName + '【独立审批 - ' + c.Show + '】'
          } else {
            c.title = c.NodeName + '【多人会审 - ' + c.Show + '】'
          }
        }
        return c
      })
    }
  }
}
</script>

<style scoped>
.chiose {
  color: #409EFF;
  font-weight: 600;
}
.icon {
  margin-right: 5px;
  font-size: 16px;
  color: #1682e6;
}
.label {
    display: inline-block;
    padding: 10px;
    vertical-align: top;
}
</style>
